<template>
  <div class="app-container">
    <el-row>
      <el-col :span="6">
        <el-input placeholder="搜索" @change="getSearchContent()" v-model="keyword">
          <el-button slot="append" @click="getSearchContent()" icon="search"></el-button>
        </el-input>
      </el-col>
      <el-col :span="6" v-if="multipleSelection.length != 0">
        <el-button type="danger" style="margin-left: 15px;" @click="deleteSelection()">删除选中</el-button>
        <el-button @click="toggleSelection()">取消选择</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-table :data="tableData" ref="multipleTable" v-loading.body="loading" @selection-change="handleSelectionChange" border>
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column label="发布时间" min-width="150">
            <template scope="scope">
              <el-icon name="time"></el-icon>
              <span style="margin-left: 10px">{{ scope.row.postTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="时间" min-width="150">
            <template scope="scope">
              <el-icon name="time"></el-icon>
              <span style="margin-left: 10px">{{ scope.row.time }}</span>
            </template>
          </el-table-column>
          <el-table-column label="标题" min-width="150">
            <template scope="scope">
              <span>{{ scope.row.title }}</span>
            </template>
          </el-table-column>
          <el-table-column label="已参加" min-width="100">
            <template  scope="scope">
              <el-tag v-if="scope.row.haveJoin>0" type="success">{{scope.row.haveJoin }}人</el-tag>
              <span v-if="scope.row.haveJoin==0" >暂时无人参加</span>
              <el-button type="primary"  v-if="scope.row.haveJoin>0" size="small" @click="getJoiner(scope.row.id)"> 查看详情</el-button>
              <el-dialog title="报名人详细信息" :visible.sync="dialogTableVisible">
                <el-table :data="joiner">
                  <el-table-column property="username" label="姓名" width="150"></el-table-column>
                  <el-table-column property="phoneNumber" label="手机号" width="200"></el-table-column>
                  <el-table-column property="wechat" label="微信号"></el-table-column>
                </el-table>
              </el-dialog>
            </template>
          </el-table-column>
          <el-table-column label="状态" min-width="100">
            <template scope="scope">
              <el-icon name="status"></el-icon>
              <el-tag :type="scope.row.status==1?'success':'warning'">{{ scope.row.status==1?'已发起':'草稿' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="150">
            <template scope="scope">
              <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-pagination :current-page.sync="currentPage" :page-size="8" layout="total, prev, pager, next" :total="pageSize" @current-change="handleCurrentChange">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import dateFormat from '@/utils/date'
  import { deleteSport, getSport,getSportJoiner } from '@/api/sport'
  import { getToken } from '@/utils/auth'
  export default {
    data() {
      return {
        dialogTableVisible: false,
        showDel: false,
        keyword: "",
        pageSize: 1,
        tableData: [
        ],
        loading: true,
        joiner:[],
        multipleSelection: [],
        currentPage: 1,
        seller_id:""
      };
    },
    created() {
      this.$nextTick(() => {
        this.seller_id =  getToken()
        this.handleCurrentChange()
      })
    },
    methods: {
      onSubmit() {
        this.$message("submit!");
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;

      },
      deleteSelection() {
        this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.multipleSelection.map((item, index) => {
              let id = item.id
              this.tableData.splice(index, 1)
              deleteSport(id).then((res)=>{
                     if(res.status==1){
                       this.currentPage=1
                       this.handleCurrentChange()
                     }
              })
            })

            this.$message({
              type: "success",
              message: "删除成功!"
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      },
      handleCurrentChange() {
        let offset = this.currentPage
        let keyword = this.keyword.replace("'", "")
        let id = this.seller_id
        getSport(id, offset, keyword).then((res) => {
          this.loading = false;
          let sport = res.sport.map((item) => {
            let time = new Date(item.postTime * 1)
            item.postTime = dateFormat(time, 'yyyy-MM-dd')
            return item
          })
          this.pageSize = res.count
          this.tableData = sport
        })
      },
      getSearchContent() {
        this.currentPage = 1
        this.handleCurrentChange()

      },
      handleDelete(index, sport) {
        this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.tableData.splice(index, 1)
            deleteSport(sport.id)
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.handleCurrentChange()
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });

      },
      handleEdit(sport) {
        this.$confirm("您确定要编辑该运动?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.$router.push({ path: `/sport/new?id=${sport.id}` })
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消编辑!"
            });
          });
      },
      getJoiner(id){
        getSportJoiner(id).then((res)=>{
          if(res.message=="ok"){
                this.joiner = res.joiner
                console.log(this.joiner)
                this.dialogTableVisible = true
          }
        })
       
      }
    }
  };

</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
</style>